import React, { Component } from 'react'
import Item from '../Item/Item'
import './List.css'
export default class List extends Component {
  render() {
    return (
      <ul className="todo-main">
        {this.props.list.map((todo) => {
          // 不要直接把list数组传给Item组件,因为Item组件不知道要渲染哪条数据
          // 在遍历过程中,正好第一次Item实例化的时候,todo就是数组中的第一条数据,第二次Item实例化的时候,todo就是第二条数据
          return <Item key={todo.id} todo={todo}></Item>
        })}
        {/*[<Item key={todo.id} todo={{ todoName: '吃饭' }}></Item>, <Item key={todo.id} todo={{todoName: '睡觉'}}></Item>]*/}
      </ul>
    )
  }
}
